<template>
  <div class="swiper">
		 <swiper :options="swiperOption" >
		    <!-- slides -->
		    <swiper-slide :key="index"  v-for="(swiper,index) in swiperList">
					<img class="swiper-img" :src="swiper.imgUrl" alt="">
				</swiper-slide>
				<!-- 图片导航 -->
		    <div class="swiper-pagination"  slot="pagination"></div>
		  </swiper>
	</div>
</template>

<script>
export default {
  name: 'HomeSwiper',
	props: ["swiperList"],
  data() {
		return {
			swiperOption: {
				// 所有的参数同 swiper 官方 api 参数
				autoplay:true,
				pagination: {
					el: '.swiper-pagination',
				},
				loop:true,
			}
		}
	},
}
</script>

<style lang='stylus' scoped>
.swiper >>> .swiper-pagination-bullet-active
    background-color:#fff
.swiper
  height:2.19rem
  .swiper-container
    height:100%
    .swiper-img
      width:100%
</style>
